<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>订单详情</title>
     <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />
</head>

<body>
    
    <!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="nav-bottom"></div>
    <script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">Michelle</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                     <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd ><a href="home-index.html"  class="list-active" >我的订单</a></dd>
							<dd><a href="home-order-pay.html" >待付款</a></dd>
							<dd><a href="home-order-send.html"  >待发货</a></dd>
							<dd><a href="home-order-receive.html" >待收货</a></dd>
							<dd><a href="home-order-evaluate.html" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="home-person-collect.html">我的收藏</a></dd>
							<dd><a href="home-person-footmark.html">我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html">个人信息</a></dd>
							<dd><a href="home-setting-address.html"  >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body">
                        <div class="order-detail">
                            <h4>订单详情</h4>
                            <div class="order-bar" v-if="order.status===1">
                            <div class="sui-steps-round steps-round-auto steps-4">
                                <div  :class="compClasses">
                                    <div class="wrap" >
                                        <div class="round" >1</div>
                                        <div class="bar" ></div>
                                    </div>
                                    <label>
                                        <span>提交订单</span>
                                        <span v-if="order.status>=1">{{formatDate(order.createTime)}}</span>
                                    </label>
                                </div>
                                <div  class="todo">
                                    <div class="wrap"  >
                                        <div class="round" >2</div>
                                        <div class="bar"   ></div>
                                    </div>
                                    <label>
                                        <span>付款成功</span>
                                        <span v-if="order.status>=2">{{formatDate(order.payTime)}}</span>
                                    </label>
                                </div>
                                <div  class="todo" >
                                    <div class="wrap" >
                                        <div class="round" >3</div>
                                        <div class="bar"   ></div>
                                    </div>
                                    <label>
                                        <span>发货</span>
                                        <span v-if="order.status>=3">{{formatDate(order.consignTime)}}</span>

                                    </label>
                                </div>
                                <div class="todo" >
                                    <div class="wrap" >
                                        <div class="round">4</div>
                                        <div class="bar"  ></div>
                                    </div>
                                    <label>
                                        <span>确认收货</span>
                                        <span v-if="order.status>=5">{{formatDate(order.payTime)}}</span>

                                    </label>
                                </div>

                                <div class="todo last">
                                    <div class="wrap">
                                        <div class="round">5</div>
                                    </div>
                                    <label>
                                        <span>评价晒单</span>
                                        <span v-if="order.status>=6">{{formatDate(order.payTime)}}</span>

                                    </label>
                                </div>
                            </div>

                        </div>






<!--2-->
                            <div class="order-bar" v-if="order.status===2">
                                <div class="sui-steps-round steps-round-auto steps-4">
                                    <div  :class="compClasses">
                                        <div class="wrap" >
                                            <div class="round" >1</div>
                                            <div class="bar" ></div>
                                        </div>
                                        <label>
                                            <span>提交订单</span>
                                            <span >{{formatDate(order.createTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses">
                                        <div class="wrap"  >
                                            <div class="round" >2</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>付款成功</span>
                                            <span >{{formatDate(order.payTime)}}</span>
                                        </label>
                                    </div>
                                    <div  class="todo" >
                                        <div class="wrap" >
                                            <div class="round" >3</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>发货</span>
                                            <span v-if="order.status>=3">{{formatDate(order.consignTime)}}</span>

                                        </label>
                                    </div>
                                    <div class="todo" >
                                        <div class="wrap" >
                                            <div class="round">4</div>
                                            <div class="bar"  ></div>
                                        </div>
                                        <label>
                                            <span>确认收货</span>
                                            <span v-if="order.status>=5">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>

                                    <div class="todo last">
                                        <div class="wrap">
                                            <div class="round">5</div>
                                        </div>
                                        <label>
                                            <span>评价晒单</span>
                                            <span v-if="order.status>=6">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>
                                </div>

                            </div>




                            <!--3-->
                            <div class="order-bar" v-if="order.status===3">
                                <div class="sui-steps-round steps-round-auto steps-4">
                                    <div  :class="compClasses">
                                        <div class="wrap" >
                                            <div class="round" >1</div>
                                            <div class="bar" ></div>
                                        </div>
                                        <label>
                                            <span>提交订单</span>
                                            <span >{{formatDate(order.createTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses">
                                        <div class="wrap"  >
                                            <div class="round" >2</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>付款成功</span>
                                            <span >{{formatDate(order.payTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses" >
                                        <div class="wrap" >
                                            <div class="round" >3</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>发货</span>
                                            <span >{{formatDate(order.consignTime)}}</span>

                                        </label>
                                    </div>
                                    <div class="todo" >
                                        <div class="wrap" >
                                            <div class="round">4</div>
                                            <div class="bar"  ></div>
                                        </div>
                                        <label>
                                            <span>确认收货</span>
                                            <span v-if="order.status>=5">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>

                                    <div class="todo last">
                                        <div class="wrap">
                                            <div class="round">5</div>
                                        </div>
                                        <label>
                                            <span>评价晒单</span>
                                            <span v-if="order.status>=6">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>
                                </div>

                            </div>








                            <!--4-->
                            <div class="order-bar" v-if="order.status===4">
                                <div class="sui-steps-round steps-round-auto steps-4">
                                    <div  :class="compClasses">
                                        <div class="wrap" >
                                            <div class="round" >1</div>
                                            <div class="bar" ></div>
                                        </div>
                                        <label>
                                            <span>提交订单</span>
                                            <span >{{formatDate(order.createTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses">
                                        <div class="wrap"  >
                                            <div class="round" >2</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>付款成功</span>
                                            <span >{{formatDate(order.payTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses" >
                                        <div class="wrap" >
                                            <div class="round" >3</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>发货</span>
                                            <span >{{formatDate(order.consignTime)}}</span>

                                        </label>
                                    </div>
                                    <div :class="compClasses" >
                                        <div class="wrap" >
                                            <div class="round">4</div>
                                            <div class="bar"  ></div>
                                        </div>
                                        <label>
                                            <span>确认收货</span>
                                            <span v-if="order.status>=5">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>

                                    <div class="todo last">
                                        <div class="wrap">
                                            <div class="round">5</div>
                                        </div>
                                        <label>
                                            <span>评价晒单</span>
                                            <span v-if="order.status>=6">{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>
                                </div>

                            </div>








                            <!--5-->
                            <div class="order-bar" v-if="order.status===5">
                                <div class="sui-steps-round steps-round-auto steps-4">
                                    <div  :class="compClasses">
                                        <div class="wrap" >
                                            <div class="round" >1</div>
                                            <div class="bar" ></div>
                                        </div>
                                        <label>
                                            <span>提交订单</span>
                                            <span >{{formatDate(order.createTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses">
                                        <div class="wrap"  >
                                            <div class="round" >2</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>付款成功</span>
                                            <span >{{formatDate(order.payTime)}}</span>
                                        </label>
                                    </div>
                                    <div  :class="compClasses" >
                                        <div class="wrap" >
                                            <div class="round" >3</div>
                                            <div class="bar"   ></div>
                                        </div>
                                        <label>
                                            <span>发货</span>
                                            <span >{{formatDate(order.consignTime)}}</span>

                                        </label>
                                    </div>
                                    <div :class="compClasses" >
                                        <div class="wrap" >
                                            <div class="round">4</div>
                                            <div class="bar"  ></div>
                                        </div>
                                        <label>
                                            <span>确认收货</span>
                                            <span >{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>

                                    <div :class="compClasses">
                                        <div class="wrap">
                                            <div class="round">5</div>
                                        </div>
                                        <label>
                                            <span>评价晒单</span>
                                            <span >{{formatDate(order.payTime)}}</span>

                                        </label>
                                    </div>
                                </div>

                            </div>























                            <div class="order-state">
                                <p><span class="red" v-if="order.status===1">当前订单状态：未付款</span></p>
                                <p><span class="red" v-if="order.status===2">当前订单状态：已付款</span></p>
                                <p><span class="red" v-if="order.status===3">当前订单状态：待发货</span></p>
                                <p><span class="red" v-if="order.status===4">当前订单状态：已收货</span></p>
                                <p><span class="red" v-if="order.status===5">当前订单状态：已关闭</span></p>
                                <p v-if="order.status===1">订单关闭:<span id="timeab"></span></p>
                            </div>
                        </div>
                        <div class="order-info">
                            <h5>订单信息</h5>
                            <p>收货地址：{{order.orderLogistics}}</p>
                            <p>订单单号：{{order.orderId}}</p>
                            <p>下单时间：{{formatDate(order.createTime)}}</p>
                            <p>支付时间：{{formatDate(order.payTime)}}</p>
                            <p>支付方式：微信</p>
                            <p>发货时间：{{formatDate(order.consignTime)}}</p>
                        </div>
                        <div class="order-goods">
                            <table class="sui-table">
                                    <thead>
                                        <th class="center" >商品</th>
                                        <th class="center" >价格</th>
                                        <th class="center" >数量</th>
                                        <th class="center" >优惠</th>
                                        <th class="center" >状态</th>
                                    </thead>                                   
                             
                                <tbody>                               
                                    <tr>
                                        <td colspan="5">订单编号：{{order.orderId}}</td>
                                    </tr>
                                    <tr v-for="(d,j) in order.orderDetails" :key="j">
                                        <td>
                                            <div class="typographic">
                                                    <img :src="d.image" />
                                                    <span>包邮 {{d.title}}</span>
                                                    <span class="guige" v-for="(v,k) in JSON.parse(d.spec)" :key="k">{{k+':'+ v}}</span>
                                                </div>
                                        </td>
                                        <td>
                                            <ul class="unstyled">
                                                    <li class="o-price">¥{{formatPrice(d.price)}}</li>
                                                    <li>¥{{formatPrice(d.price)}}</li>
                                                </ul>
                                        </td>
                                        <td>{{d.num}}</td>
                                        <td>无优惠</td>
                                        <td>交易成功</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="order-price">
                                <p>商品总金额：￥{{order.totalFee/100.0}}</p>
                                <p>运费金额：，免费用</p>
                                <p>使用优惠券：无</p>
                                <h4 class="red">实际支付：￥{{order.actualFee/100.0}}</h4>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!--猜你喜欢-->
                        <div class="like-title">
                            <div class="mt">
                                <span class="fl"><strong>热卖单品</strong></span>
                            </div>
                        </div>
                        <div class="like-list">
                            <ul class="yui3-g">
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike01.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有6人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike02.png" />
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike03.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-4">
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="img/_/itemlike04.png" />
                                        </div>
                                        <div class="attr">
                                            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                        </div>
                                        <div class="price">
                                            <strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
                                        </div>
                                        <div class="commit">
                                            <i class="command">已有700人评价</i>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/pages/shortcut.js"></script>
<script>
    var outArr;
    var vm=new Vue({
        el: "#account",
        data() {
            return {
                ly,
                order: {
                    orderId: 10010123410,
                    totalFee: 549800,
                    actualFee: 549800,
                    status: 1,
                    createTime: 15324812456,
                    orderDetails: [ ],
                    payTime: 0,
                    orderLogistics:"",
                    consignTime:0
                }
            }
        },

        created(){

            this.findDetail();
        },

        methods:{
            findDetail() {
                // 获取订单id
                const id = ly.getUrlParam("id");
                ly.http.get("/trade/order/findDetail?orderId="+id)
                    .then(resp => {
                        console.log(resp.data);
                        this.order=resp.data;
                        outArr=this.order;
                    })
                    .catch(e => console.log(e))

                //console.log(outArr);
            },
            formatDate: ly.formatDate,
            formatPrice: ly.formatPrice
        },
        computed:{
            compClasses:function () {
                if (this.order.status===1){
                    return{
                        'finished': true
                    }
                }else if (this.order.status===2){
                    return{
                        'finished': true
                    }
                }else if (this.order.status===3){
                    return{
                        'finished': true
                    }
                }
            },
            compClasses2:function () {
                if (this.order.status===2){
                    return{
                        'current': true
                    }
                }
            },
        }
    });


    let timmer=setInterval(changeDate,1000);
    function changeDate() {
           //for (let i in outArr) {
           // console.log(new Date().getTime());
           // console.log(outArr[i]);
            let use =outArr.consignTime- new Date().getTime() ;//已经用过的时间
           //console.log(new Date().getTime())
           //console.log(outArr.consignTime)
           //console.log(use);

            let day=Math.floor(use /24 / 60 / 60 / 1000);
            let hour = Math.floor((use - day * 24 * 60 * 60 * 1000) / 60 / 60/ 1000);
            let min = Math.floor((use - day * 24 * 60 * 60 * 1000- hour * 60 * 60 * 1000) / 60 / 1000);
            let second = Math.floor((use - day * 24 * 60 * 60 * 1000- hour * 60 * 60 * 1000 - min * 60 * 1000) / 1000);

            let time = day + "天" + hour + "时" + min + "分" + second + "秒";
            console.log(time);

            document.getElementById("timeab").innerHTML=time;

            if(time=="0天0时0分0秒"){
                clearInterval(timmer);
                document.getElementById("timeab").innerHTML="订单已经关闭";
            }
        //}
    }




</script>
</html>